Vue的watch和computed属性

Vue的watch属性

Vue的watch属性可以用来监听data属性中数据的变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    firstname:"",
                    lastname:""
                },
                methods:{},
                watch:{
                    firstname:function(){
                        console.log(this.firstname)
                    }
                }
            })
        </script>
    </body>
</html>

可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次

同时还可以直接在监听的function中使用参数来获取新值与旧值

                watch:{
                    firstname:function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                    }
                }

其中第一个参数是新值，第二个参数是旧值

同时Watch还可以被用来监听路由router的变化，只是这里的监听的元素是固定的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
        
        <div id="app">
            <!--
                由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号
            -->
<!--            <a href="#/login">登录</a>
            <a href="#/register">注册</a>-->
            <router-link to="/login" tag="span">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    </body>
    <script>
        var login={
            template:'<h1>登录组件</h1>'
        }
        var register={
            template:'<h1>注册组件</h1>'
        }
        var routerObj = new VueRouter({
            routes:[
            //此处的component只能使用组件对象，而不能使用注册的模板的名称
                {path:"/login",component:login},
                {path:"/register",component:register}
            ]
        })
        var vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                
            },
            router:routerObj,//将路由规则对象注册到VM实例上
            watch:{
                '$route.path':function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                }
            }
        })
    </script>
</html>

计算属性Computed的作用

computed属性的作用与watch类似，也可以监听属性的变化

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/vue.min.js"></script>
        <script src="lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname" />
            <input type="text" v-model="lastname" />
            <input type="text" v-model="fullname" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    firstname:"",
                    lastname:""
                },
                methods:{},
/*                watch:{
                    firstname:function(newValue,OldValue){
                        console.log(newValue);
                        console.log(OldValue);
                    }
                }*/
                computed:{
                    fullname:function(){
                        return this.firstname +"-"+this.lastname
                    }
                }
            })
        </script>
    </body>
</html>

只是他会根据他依赖的属性，生成一个属性，让vm对象可以使用这个属性

methods,watch,computed的区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

Vue的watch和computed属性

Vue的watch属性

计算属性Computed的作用

methods,watch,computed的区别

镇屌在寻找人生目标的路上

引用和评论

前端开发工具

开发插件集合

Vue.js-方法与事件

Vue 项目推荐使用这个图标库 vue-icons-plus

从零开始搭建 Vue3 组件库开发环境

这个前端神器，竟让滴滴、美团都爱不释手？！

electron开发采坑小记